/*
*@module: Common core mixin
*@Author: guoleiting 2016-08-10
*@Update: 
*/


@charset "UTF-8";
//-----------------------------------------------------  
// mixin scss
// 包括常用的mixin，%及@function
// mixin，通过@include调用，样式通过拷贝的方式使用，尤其适用于传递参数
// %，通过@extend调用，样式通过组合申明的方式使用，适用于不传参数的代码片段  
// @function，返回一个值，用于调用
//-----------------------------------------------------

// mixin & %
// 既定义了mixin也定义了%，根据需求使用@include或@extend调用
//-----------------------------------------------------


// inline-block
@mixin ib($valign:middle) {
	display: inline-block;
	vertical-align: $valign;
  *display: inline;
  *zoom:1;
}
%ib{
	@include ib;
}

@mixin text-hide {
  @include ib;
  white-space: nowrap;
  word-wrap: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  _width: 100%;
}
%text-hide{
  @include text-hide;
}


// Text overflow
// 元素可以设置宽度才可应用省略号
%ellipsis-basic{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; 
}
@mixin ellipsis($width:100%) {
  @extend %ellipsis-basic;
  width:$width;
}


// float left & right
@mixin float($float:left) {
  float: $float;
}
%float{
  @include float;
}

// clearfix
// 闭合子元素的浮动
@mixin clearfix ($extend:true) {
  @if $extend {
    @extend %clearfix;
  } @else {
    &:before,
    &:after {
      content: "";
      display: table;
    }
    &:after {
      clear: both;
    }
  }
}
%clearfix{
  @include clearfix(false);
}

// Hide from both screenreaders and browsers: h5bp.com/u
// 既隐藏于视觉也隐藏于屏幕浏览器
@mixin hidden ($extend:true) {
  @if $extend {
    @extend %hidden;
  } @else {
    display: none !important;
    visibility: hidden;    
  }
}
%hidden{
  @include hidden(false);
}


// Opacity
@mixin opacity($opacity:50) {
	opacity: $opacity / 100;
	filter: alpha(opacity=$opacity);
}
%opacity{
	@include opacity;
}


// disabled
// 禁用样式，加!important
@mixin disabled($bgColor:#e6e6e6,$textColor:#ababab){
  background-color: $bgColor !important;
  color: $textColor !important;
  // cursor: not-allowed !important;
}
%disabled{
  @include disabled;
}













